<template>
  <div class="centerContainer">
    <div class="centerHeader">
      <div class="headerBox" v-if="userInfo.name">
        <van-image
          width="100"
          height="100"
          border-radius="20"
          :src="require('../../assets/images/avatar.jpg')"
        >
        </van-image>
        <span class="userDesc">{{ userInfo.name }}</span>
      </div>
      <div class="headerBox" @click="toLogin" v-else>
        <van-image
          width="100"
          height="100"
          border-radius="20"
          src="//yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png"
        >
        </van-image>
        <span class="userDesc">用户的昵称</span>
      </div>
    </div>
    <div class="centerMiddle">
      <div class="middleTitle">
        <span>我的资产</span>
        <span v-if="userInfo.name" style="color: #dd1a21">￥999999999999</span>
      </div>
      <div class="middleMain">
        <div class="middleMainBox">
          <div>￥0</div>
          <div>余额</div>
        </div>
        <div class="middleMainBox">
          <div>0</div>
          <div>红包</div>
        </div>
        <div class="middleMainBox">
          <div>0</div>
          <div>优惠券</div>
        </div>
        <div class="middleMainBox">
          <div>￥0</div>
          <div>津贴</div>
        </div>
        <div class="middleMainBox">
          <div>0</div>
          <div>礼品卡</div>
        </div>
      </div>
    </div>
    <div class="blank"></div>
    <van-grid direction="vertical" :column-num="3">
      <van-grid-item icon="orders-o" text="我的订单" />
      <van-grid-item icon="phone-o" text="账号管理" />
      <van-grid-item icon="photo-o" text="我的手机号" />
      <van-grid-item icon="calendar-o" text="周六一起拼" />
      <van-grid-item icon="bill-o" text="售后服务" />
      <van-grid-item icon="sign" text="邀请返利" />
      <van-grid-item icon="shop-o" text="优先购" />
      <van-grid-item icon="gold-coin-o" text="积分中心" />
      <van-grid-item icon="diamond-o" text="会员俱乐部" />
      <van-grid-item icon="location-o" text="地址管理" />
      <van-grid-item icon="shield-o" text="支付安全" />
      <van-grid-item icon="service-o" text="帮助与客服" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="flag-o" text="我的竞拍" />
    </van-grid>
    <div class="blank1"></div>
    <div class="bottom">
      <button @click="tologout">退出登录</button>
    </div>
    <div class="bottom1"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'Center',
  data() {
    return {};
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
    }),
  },
  mounted() {
    //看userInfo
    this.kk();
  },
  methods: {
    kk() {
      // console.log(this.$store.state.user.userInfo);
      // console.log('localStorage.userName',localStorage.userName);
    },
    //点击去登录页面
    toLogin() {
      this.$router.push('/login');
    },
    async tologout() {
      // 登出的时候，要删除vuex和本地存储中的token 所以要dispath，发送请求。
      await this.$store.dispatch('UserLogout');
    },
  },
};
</script>

<style lang="less" scoped>
.centerContainer {
  .centerHeader {
    width: 100%;
    height: 135px;
    background-color: #f7d189;
    .headerBox {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 30px;
      .userDesc {
        font-size: 25px;
        margin-left: 25px;
      }
    }
  }
  .centerMiddle {
    .middleTitle {
      font-size: 16px;
      margin: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #e7e7e7;
    }
    .middleMain {
      width: 100%;
      height: 40px;
      display: flex;
      margin-bottom: 20px;
      .middleMainBox {
        width: 20%;
        height: 100%;
        // background-color: #ff0000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
  .blank {
    width: 100%;
    height: 10px;
    background-color: #f4f4f4;
  }
  .van-grid {
    width: 100%;
    height: 454px;
  }
  .blank1 {
    width: 100%;
    height: 20px;
    background-color: #f4f4f4;
  }
  .bottom {
    width: 100%;
    height: 46px;
    button {
      width: 100%;
      height: 46px;
      font-size: 15px;
      text-align: center;
      background-color: #fff;
      outline: none;
      border: none;
    }
  }
  .bottom1 {
    width: 100%;
    height: 70px;
    background-color: #f4f4f4;
  }
}
/deep/ .van-image__img {
  border-radius: 50%;
}
</style>
